<%= form_for @changeset, @action, [multipart: true, class: "ui form"], fn f -> %>
  <div class="two fields">
    <div class={"twelve wide field required #{AdminHelpers.error_class(f, :title)}"}>
      <label for="title">
        Title
        <span><a href="javascript:void(0);" class="field-action js-title-guide-modal">(style guide)</a></span>
      </label>
      <%= text_input(f, :title, placeholder: "Why SQLite succeeded as a database") %>
      <%= AdminHelpers.error_message(f, :title) %>
    </div>

    <div class={"four wide field required #{AdminHelpers.error_class(f, :slug)}"}>
      <%= label(f, :slug) %>
      <%= text_input(f, :slug, placeholder: "183", readonly: f.data.published) %>
      <%= AdminHelpers.error_message(f, :slug) %>
    </div>
  </div>

  <div class="two fields">
    <div class={"twelve wide field #{AdminHelpers.error_class(f, :subtitle)}"}>
      <%= label(:f, :subtitle) do %>
        Subtitle <%= AdminHelpers.help_icon("Used underneath title on episode page and combined with title for html <title>") %>
        <span><a href="javascript:void(0);" class="field-action js-subtitle-guide-modal">(style guide)</a></span>
      <% end %>
      <%= text_input(f, :subtitle, placeholder: "with Richard Hipp, creator of SQlite") %>
    </div>

    <div class={"four wide field #{AdminHelpers.error_class(f, :status)}"}>
      <%= label(:f, :type) do %>
        Type <%= AdminHelpers.help_icon("Full episodes require a numbered slug. Bonus & Trailer episodes are feed-only (no news item)") %>
      <% end %>
      <%= select(f, :type, type_options(), class: "ui fluid dropdown") %>
    </div>
  </div>

<%= if f.data.published do %>
  <div class="field">
    <label for="socialize_url">
      Socialize URL
    <%= if f.data.socialize_url do %>
      <a href={f.data.socialize_url} class="field-action" rel="external">(go to there)</a>
    <% end %>
    </label>
    <%= text_input(f, :socialize_url, placeholder: "https://changelog.social/@changelog/109926145715676533") %>
  </div>
<% end %>

  <div class="fields">
    <div class={"three wide field #{AdminHelpers.error_class(f, :featured)}"}>
      <label>Recommend <%= AdminHelpers.help_icon("Episode will appear in recommended list. Limit to 10% of show's total episodes, max.") %></label>
      <div class="ui fitted toggle checkbox">
        <%= checkbox(f, :featured, class: "hidden") %>
        <%= AdminHelpers.error_message(f, :featured) %>
      </div>
    </div>

    <div class="three wide field">
      <label>Requested</label>
      <div class="ui fitted toggle checkbox">
        <%= checkbox(f, :requested, class: "hidden", value: !!f.data.request_id) %>
      </div>
    </div>

    <div class="eight wide field">
      <label for="cover">
        Cover Art
        <%= AdminHelpers.help_icon("Ideal size is 3000px by 3000px") %>
        <%= AdminHelpers.file_toggle_buttons() %>
      </label>
      <%= file_input(f, :cover) %>
      <%= AdminHelpers.error_message(f, :cover) %>
    </div>

    <div class="two wide field">
      <%= if AdminHelpers.is_persisted(f.data) do %>
        <img
          src={EpisodeView.cover_url(f.data, :small)}
          data-popup="true"
          width="66"
          height="66"
          data-content={if f.data.cover, do: "Using the uploaded file", else: "Using the podcast cover"}
        >
      <% end %>
    </div>
  </div>

  <div class={"field #{AdminHelpers.error_class(f, :request_id)} #{AdminHelpers.hidden_class(!f.data.request_id)}"}>
    <%= label(f, :request_id, "Request") %>
    <%= select(f, :request_id, request_options(@episode_requests), prompt: "Select a request", class: "ui fluid dropdown") %>
  </div>

  <div class="required field">
    <%= label(f, :hosts) %>

    <div class="ui middle aligned selection list js-episode_hosts">
      <%= inputs_for f, :episode_hosts, fn i -> %>
        <% host = AdminHelpers.load_from_form(i, Person, :person) %>
      <div class={if AdminHelpers.is_persisted(i.data), do: "item persisted", else: "item"}>
          <%= hidden_input(i, :person_id) %>
          <%= hidden_input(i, :position, class: "js-position") %>
          <img class="ui avatar image" src={ChangelogWeb.PersonView.avatar_url(host)}>

          <div class="content">
            <div class="header"><%= host.name %> (@<%= host.handle %>)</div>
          </div>

          <div class="right floated content">
            <div class="ui tiny icon button js-remove">
              <i class="remove icon"></i>
              <%= hidden_input(i, :delete) %>
            </div>
          </div>
        </div>
      <% end %>
    </div>

    <div class="ui search">
      <div class="ui left icon input">
        <input class="prompt" type="text" placeholder="Add a Host">
        <i class="user icon"></i>
      </div>
    </div>
  </div>

  <div class="field">
    <%= label(f, :guests) %>

    <div class="ui middle aligned selection list js-episode_guests">
      <%= inputs_for f, :episode_guests, fn i -> %>
        <% guest = AdminHelpers.load_from_form(i, Person, :person) %>
        <div class={if AdminHelpers.is_persisted(i.data), do: "item persisted", else: "item"}>
          <%= hidden_input(i, :person_id) %>
          <%= hidden_input(i, :position, class: "js-position") %>
          <img class="ui avatar image" src={ChangelogWeb.PersonView.avatar_url(guest)}>

          <div class="content">
            <div class="header"><%= guest.name %> (@<%= guest.handle %>)</div>
          </div>

          <div class="right floated content">
            <div class="ui tiny icon button js-remove">
              <i class="remove icon"></i>
              <%= hidden_input(i, :delete) %>
            </div>
          </div>
        </div>
      <% end %>
    </div>

    <div class="ui search">
      <div class="ui left icon input">
        <input class="prompt" type="text" placeholder="Add a Guest">
        <i class="user icon"></i>
      </div>
    </div>
  </div>

  <div class="field">
    <%= label(f, :sponsors) %>

    <div class="ui middle aligned selection list js-episode_sponsors">
      <%= inputs_for f, :episode_sponsors, fn i -> %>
        <% sponsor = AdminHelpers.load_from_form(i, Sponsor, :sponsor) %>
        <div class={if AdminHelpers.is_persisted(i.data), do: "item persisted", else: "item"}>
          <%= hidden_input(i, :sponsor_id) %>
          <%= hidden_input(i, :position, class: "js-position") %>

          <div class="right floated content">
          <%= if i.data.starts_at do %>
            <div
              class="ui tiny icon clipboard button"
              data-clipboard-text={url(~p"/#{@podcast.slug}/#{@episode.slug}") <> "#t=#{round(i.data.starts_at)}"}
              title="Copy URL with timestamp">
              <i class="clipboard icon"></i>
            </div>
          <% end %>

            <div class="ui tiny icon button js-remove">
              <i class="remove icon"></i>
              <%= hidden_input(i, :delete) %>
            </div>
          </div>

          <h4 class="ui sponsor header">
            #<span class="js-position-display"><%= i.data.position || i.params["position"] %></span> &mdash;
            <%= link(sponsor.name, to: ~p"/admin/sponsors/#{sponsor}", rel: "external") %>
          </h4>

          <div class="fields">
            <div class={"required four wide field #{AdminHelpers.error_class(i, :title)}"}>
              <label>Title</label>
              <%= text_input(i, :title) %>
              <%= AdminHelpers.error_message(i, :title) %>
            </div>

            <div class={"required twelve wide field #{AdminHelpers.error_class(i, :link_url)}"}>
              <label>Link</label>
              <%= text_input(i, :link_url) %>
              <%= AdminHelpers.error_message(i, :link_url) %>
            </div>
          </div>

          <div class="field">
            <label>Description</label>
            <%= textarea(i, :description, rows: 1) %>
          </div>

          <div class="fields">
            <div class="field">
              <label>Starts At</label>
              <%= text_input(i, :starts_at, class: "js-time-in-seconds") %>
              <%= AdminHelpers.error_message(i, :starts_at) %>
            </div>

            <div class="field">
              <label>Ends At</label>
              <%= text_input(i, :ends_at, class: "js-time-in-seconds") %>
              <%= AdminHelpers.error_message(i, :ends_at) %>
            </div>
          </div>
        </div>

        <div class="ui divider"></div>
      <% end %>
    </div>

    <div class="ui search">
      <div class="ui left icon input">
        <input class="prompt" type="text" placeholder="Add a Sponsor">
        <i class="dollar icon"></i>
      </div>
    </div>
  </div>

  <div class="field">
    <%= label(f, :topics) %>

    <div class="ui horizontal selection list js-topics js-episode_topics">
      <%= inputs_for f, :episode_topics, fn i -> %>
        <% topic = AdminHelpers.load_from_form(i, Topic, :topic) %>
        <div class={if AdminHelpers.is_persisted(i.data), do: "item persisted", else: "item"}>
          <%= hidden_input(i, :topic_id) %>
          <%= hidden_input(i, :position, class: "js-position") %>

          <div class="content">
            <a class="ui label">
              <%= topic.name %>
              <span class="js-remove">
                <i class="delete icon"></i>
                <%= hidden_input(i, :delete) %>
              </span>
            </a>
          </div>
        </div>
      <% end %>
    </div>

    <div class="ui search">
      <div class="ui left icon input">
        <input class="prompt" type="text" placeholder="Add a Topic">
        <i class="block layout icon"></i>
      </div>
    </div>
  </div>

  <div class={"field required #{AdminHelpers.error_class(f, :summary)}"}>
    <%= label(f, :summary) %>
    <%= textarea(f, :summary, placeholder: "Keep it brief. Markdown enabled.", rows: 2) %>
    <%= AdminHelpers.error_message(f, :summary) %>
  </div>

  <div class="field">
    <label for="doc_url">
      Collab Doc URL
    <%= if f.data.doc_url do %>
        <a href={f.data.doc_url} class="field-action" rel="external">(go to there)</a>
    <% end %>
    </label>
    <%= text_input(f, :doc_url, placeholder: "https://hackmd.io/8675309/edit") %>
  </div>

  <div class="field">
    <%= label(f, :notes) %>
    <%= textarea(f, :notes, placeholder: "The more, the better. Markdown enabled.", rows: 5) %>
  </div>

  <div class="field">
    <%= label(f, :audio_file) do %>
      Audio MP3 File <%= AdminHelpers.help_icon("Upload after Slug, Publish Time, and Title are finalized so correct ID3 tags get written.") %>
    <% end %>

    <%= if f.data.audio_file  do %>
      <div class="ui raised segment items js-audio-file">
        <div class="ui item">
          <div class="content">
            <div class="header">
            <%= link(audio_filename(f.data), to: audio_url(f.data)) %>
            </div>
            <p class="description">
              Currently &mdash; a <span class="emphasis"><%= megabytes(f.data) %> MB</span> file,
              runs <span class="emphasis"><%= TimeView.duration(f.data.audio_duration) %></span>,
              last updated <span class="emphasis"><%= AdminHelpers.ts(f.data.audio_file.updated_at) %></span>
            </p>
          </div>
        </div>
      </div>
    <% end %>

    <%= file_input(f, :audio_file) %>
  </div>

  <% has_audio_chapters = Enum.any?(f.data.audio_chapters) %>
  <div class="ui accordion field">
    <div class={if !has_audio_chapters, do: "title active", else: "title"}>
      <i class="icon dropdown"></i>
      <%= label(f, :audio_chapters) do %>
        Audio Chapters <%= if has_audio_chapters do %>(<%= length(f.data.audio_chapters) %>)<% end %>
      <% end %>
    </div>

    <div class={if !has_audio_chapters, do: "content field active", else: "content field"}>
      <div class="ui padded segment js-wav-file">
        <div class="ui icon message">
            <i class="file audio icon"></i>
            <div class="content">
              <div class="header">
                Drop a markered .wav file here to get started
              </div>
              <p>We'll use it to create chapters. Existing chapters will be cleared first. Nothing changes until you save the form.</p>
              <p>We'll also match chapters up with the Sponsors section in the form above, using this format "Sponsor: {Sponsor Name}"</p>
            </div>
        </div>
      </div>

      <div class="ui relaxed small list js-audio_chapters">
      <%= inputs_for f, :audio_chapters, fn i -> %>
          <div class={if AdminHelpers.is_persisted(i.data), do: "item persisted", else: "item"}>
          <div class="content">
            <div class="fields">
              <div class={"seven wide required field #{AdminHelpers.error_class(i, :title)}"}>
                <%= label(i, :title) do %>
                  <%= i.index + 1 %>: Title
                <% end %>
                <%= text_input(i, :title) %>
              </div>

              <div class={"eight wide field #{AdminHelpers.error_class(i, :link_url)}"}>
                <%= label(i, :link_url, "Link URL") %>
                <%= text_input(i, :link_url) %>
              </div>

              <div class="one wide field">
                <label>&nbsp;</label>
                <div class="ui tiny icon button js-remove">
                  <i class="remove icon"></i>
                  <%= hidden_input(i, :delete) %>
                </div>
              </div>
            </div>

            <div class="fields">
              <div class="one wide field">
                <label>&nbsp;</label>
                <div class="ui tiny basic icon button">
                  <i class="paperclip icon"></i>
                </div>
              </div>

              <div class={"three wide required field #{AdminHelpers.error_class(i, :starts_at)}"}>
                <%= label(i, :starts_at) %>
                <%= text_input(i, :starts_at, class: "js-time-in-seconds") %>
              </div>

              <div class={"three wide field #{AdminHelpers.error_class(i, :ends_at)}"}>
                <%= label(i, :ends_at) %>
                <%= text_input(i, :ends_at, class: "js-time-in-seconds") %>
              </div>

              <div class={"eight wide field #{AdminHelpers.error_class(i, :image_url)}"}>
                <%= label(i, :image_url, "Image URL") %>
                <%= text_input(i, :image_url) %>
              </div>

              <div class="one wide field">
                <label>&nbsp;</label>
              <%= if i.data.image_url do %>
                <a href={i.data.image_url} target="_blank"><img src={i.data.image_url} width="30" height="30" /></a>
              <% end %>
              </div>
            </div>
          </div>
        </div>
      <% end %>
      </div>

      <div class="ui tiny icon button js-add-chapter" data-type="audio">
        <i class="add icon"></i>
      </div>
    </div>
  </div>

  <div class="field">
    <%= label(f, :plusplus_file) do %>
      PlusPlus File <%= AdminHelpers.help_icon("Upload after Slug, Publish Time, and Title are finalized so correct ID3 tags get written.") %>
    <% end %>

    <%= if f.data.plusplus_file  do %>
      <div class="ui raised segment items js-audio-file">
        <div class="ui item">
          <div class="content">
            <div class="header">
            <%= link(plusplus_filename(f.data), to: plusplus_url(f.data)) %>
            </div>
            <p class="description">
              Currently &mdash; a <span class="emphasis"><%= megabytes(f.data, :plusplus) %> MB</span> file,
              runs <span class="emphasis"><%= TimeView.duration(f.data.plusplus_duration) %></span>,
              last updated <span class="emphasis"><%= AdminHelpers.ts(f.data.plusplus_file.updated_at) %></span>
            </p>
          </div>
        </div>
      </div>
    <% end %>

    <%= file_input(f, :plusplus_file) %>
  </div>

  <% has_plusplus_chapters = Enum.any?(f.data.plusplus_chapters) %>
  <div class="ui accordion field">
    <div class={"title #{if !has_plusplus_chapters, do: "active"}"}>
      <i class="icon dropdown"></i>
      <%= label(f, :plusplus_chapters) do %>
        PlusPlus Chapters <%= if has_plusplus_chapters do %>(<%= length(f.data.plusplus_chapters) %>)<% end %>
      <% end %>
    </div>

    <div class={"content field #{if !has_plusplus_chapters, do: "active"}"}>
      <div class="ui padded segment js-wav-file">
        <div class="ui icon message">
            <i class="file audio icon"></i>
            <div class="content">
              <div class="header">
                Drop a markered .wav file here to get started
              </div>
              <p>We'll use it to auto-create chapters. Existing chapters will be cleared first. Nothing changes until you save the form.</p>
            </div>
        </div>
      </div>

      <div class="ui relaxed small list js-plusplus_chapters">
      <%= inputs_for f, :plusplus_chapters, fn i -> %>
        <div class={if AdminHelpers.is_persisted(i.data), do: "item persisted", else: "item"}>
          <div class="content">
            <div class="fields">
              <div class={"seven wide required field #{AdminHelpers.error_class(i, :title)}"}>
                <%= label(i, :title) do %>
                <%= i.index + 1 %>: Title
                <% end %>
                <%= text_input(i, :title) %>
              </div>

              <div class={"eight wide field #{AdminHelpers.error_class(i, :link_url)}"}>
                <%= label(i, :link_url, "Link URL") %>
                <%= text_input(i, :link_url) %>
              </div>

              <div class="one wide field">
                <label>&nbsp;</label>
                <div class="ui tiny icon button js-remove">
                  <i class="remove icon"></i>
                  <%= hidden_input(i, :delete) %>
                </div>
              </div>
            </div>

            <div class="fields">
              <div class="one wide field">
                <label>&nbsp;</label>
              </div>

              <div class={"three wide required field #{AdminHelpers.error_class(i, :starts_at)}"}>
                <%= label(i, :starts_at) %>
                <%= text_input(i, :starts_at, class: "js-time-in-seconds") %>
              </div>

              <div class={"three wide field #{AdminHelpers.error_class(i, :ends_at)}"}>
                <%= label(i, :ends_at) %>
                <%= text_input(i, :ends_at, class: "js-time-in-seconds") %>
              </div>

              <div class={"eight wide field #{AdminHelpers.error_class(i, :image_url)}"}>
                <%= label(i, :image_url, "Image URL") %>
                <%= text_input(i, :image_url) %>
              </div>

              <div class="one wide field">
                <label>&nbsp;</label>
              <%= if i.data.image_url do %>
                <a href={i.data.image_url} target="_blank"><img src={i.data.image_url} width="30" height="30" /></a>
              <% end %>
              </div>
            </div>
          </div>
        </div>
      <% end %>
      </div>

      <div class="ui tiny icon button js-add-chapter" data-type="plusplus">
        <i class="add icon"></i>
      </div>
      <div class="ui tiny icon button js-copy-chapter-data" title="Copy data from matching chapters above">
        <i class="copy icon"></i>
      </div>
    </div>
  </div>

  <div class="two fields">
    <div class="inline field">
      <div class="ui toggle checkbox">
        <%= checkbox(f, :recorded_live, class: "hidden") %>
        <label>Recorded Live</label>
      </div>
    </div>

    <div class={"inline field #{if !f.data.recorded_live, do: "hidden"} #{AdminHelpers.error_class(f, :youtube_id)}"}>
      <%= text_input(f, :youtube_id, placeholder: "dQw4w9WgXcQ", mask: "slug") %>
      <%= label(f, :youtube_id, "YouTube ID") %>
    </div>
  </div>

  <div class="two fields">
    <div class={"field #{AdminHelpers.error_class(f, :recorded_at)}"}>
      <%= label(f, :recorded_at, "Record Time") %>
      <%= AdminHelpers.semantic_calendar_field(f, :recorded_at) %>
      <%= AdminHelpers.error_message(f, :recorded_at) %>
    </div>

    <div class={"field #{AdminHelpers.error_class(f, :published_at)}"}>
      <%= label(f, :published_at) do %>
        Publish Time <%= AdminHelpers.help_icon("Select a future time and click 'Publish' to schedule") %>
      <% end %>
      <%= AdminHelpers.semantic_calendar_field(f, :published_at) %>
      <%= AdminHelpers.error_message(f, :published_at) %>
    </div>
  </div>

<%= if Podcast.is_news(@podcast) do %>
  <div class={"field #{AdminHelpers.error_class(f, :email_subject)}"}>
    <%= label(:f, :email_subject) %>
    <%= text_input(f, :email_subject) %>
  </div>

  <div class={"field #{AdminHelpers.error_class(f, :email_teaser)}"}>
    <%= label(:f, :email_teaser) %>
    <%= text_input(f, :email_teaser) %>
  </div>

  <div class={"field #{AdminHelpers.error_class(f, :email_content)}"}>
    <label for="email_content">
      Email content
    <%= if f.data.published do %>
      <a href={~p"/#{@podcast.slug}/#{@episode.slug}/email"} class="field-action" rel="external">(view)</a>
    <% else %>
      <a href={~p"/admin/mailers/news_published"} class="field-action" rel="external">(preview)</a>
    <% end %>
    </label>
    <%= textarea(f, :email_content, placeholder: "Markdown enabled.", rows: 5) %>
    <%= AdminHelpers.error_message(f, :email_content) %>
  </div>
<% end %>

  <div class="ui hidden divider"></div>

  <div class="ui equal width stackable grid">
  <%= if !AdminHelpers.is_persisted(f.data) do %>
    <div class="column"><%= AdminHelpers.submit_button(:primary, "Create") %></div>
    <div class="column"><%= AdminHelpers.submit_button(:secondary, "Create and Close", AdminHelpers.next_param(@conn, ~p"/admin/podcasts/#{@podcast.slug}/episodes")) %></div>
  <% else %>
    <div class="column"><%= AdminHelpers.submit_button(:primary, "Save", "edit") %></div>
    <div class="column"><%= AdminHelpers.submit_button(:secondary, "Save and Close", AdminHelpers.next_param(@conn)) %></div>
  <% end %>
    <div class="column">
    <%= if Policies.Admin.Episode.publish(@current_user, @changeset.data) do %>
    <%= cond do %>
    <% Episode.is_published(@changeset.data) -> %>
      <%= link("Unpublish", to: "#{@action}/unpublish", class: "ui red fluid basic button", method: :post, data: [confirm: "Are you sure?"]) %>
    <% Episode.is_publishable(@changeset.data) -> %>
      <button class="ui green fluid basic button js-publish-modal">Publish</button>
    <% true -> %>
      <button class="ui green fluid basic disabled button">Publish</button>
    <% end %>
    <% end %>
    </div>
  </div>
<% end %>

<%= if Episode.is_publishable(@changeset.data) do %>
  <%= render("_publish_modal.html", assigns) %>
<% end %>

<%= render("_style_guide_modal.html", assigns) %>
